<template>
  <div>
    <van-nav-bar title="歌单详情" fixed left-arrow @click-left="$router.back()" />
    <div class="wrap">
      <div class="header">
        <div class="img_wrap">
          <img :src="imgUrl" style="width:100px;border-radius: 20px;" alt="">
        </div>
        <div class="head-right">
          <div class="name">
            <p>{{ this.name }}</p>
          </div>
          <div class="des">
            <p>{{ this.description }}</p>
          </div>
        </div>
      </div>
      <div class="songs" v-for="(obj, index) in List" :key="index"
        @click="$router.push({ path: '/play', query: { id: List[index].id } })">
        <img style="width: 30px;border-radius: 5px;" :src="List[index].al.picUrl" alt="">
        <div class="details">
          <div>{{ List[index].al.name }}</div>
          <div>{{ List[index].ar[0].name }}</div>
        </div>
        <van-icon name="arrow" />
      </div>

    </div>
  </div>
</template>

<style scoped>
.wrap {
  margin-top: 50px;
  padding: 5px;
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.header {
  height: 135px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #837f7f;
}

.head-right {
  margin-left: 15px;
  /* border: 1px solid #000; */
  width: 70%;
}

.name {
  font-size: 15px;
}

.des {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /* border: 1px solid #000; */
}

.songs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 30px;
  /* border: 1px solid #000; */

}

.details {
  width: 80%;
  /* border-bottom: 1px solid #837f7f; */
  display: flex;
  flex-flow: column;
}
</style>

<script>
import { getRecommendSongsByIdAPI } from '@/api'
export default {
  data() {
    return {
      List: [],
      imgUrl: '',
      name: '',
      description: '',
      // id: ''
    }
  },
  async created() {
    const res = await getRecommendSongsByIdAPI({
      id: this.$route.query.id,
      limit: 20,
    })
    console.log('歌单详情', res);
    this.List = res.data.playlist.tracks
    this.imgUrl = res.data.playlist.coverImgUrl
    this.name = res.data.playlist.name
    this.description = res.data.playlist.description
    // for (let i = 0; i < 20; i++) {
    //   this.id = res.data.playlist.tracks[i].id
    // }
  }
}
</script>